<template>
  <div class="cl-chart" ref="chartDom"></div>
</template>
<script setup>
import { reactive, onMounted, watch, ref } from 'vue'
import * as echarts from 'echarts'

const chartDom = ref(null)
let myChart
const echartsInit = () => {
  myChart = echarts.init(chartDom.value)
}
const echartsetOption = (param) => {
  if (myChart) {
    myChart.setOption(param)
  }
}
onMounted(() => {
  let option = {
    color: ['rgba(224, 86, 25, 0.80)', 'rgba(0, 255, 96, 1)'],
    grid: {
      show: false,
      top: '3%',
      bottom: '2%',
      left: '2%',
      right: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLine: {
        show: false,
        lineStyle: {
          color: 'red'
        }
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      axisLabel: {
        show: true,
        color: '#fff'
      },
      data: []
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(229, 243, 247, 0.2)'
        }
      },
      axisLabel: {
        show: true,
        color: '#fff'
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    series: [
      {
        name: '去年',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        showSymbol: false
      },
      {
        name: '今年',
        data: [700, 800, 901, 600, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        showSymbol: false
      }
    ]
  }
  for (let i = 1; i < 13; i++) {
    let _val = i > 9 ? `${i}` : '0' + i
    option.xAxis.data.push(_val)
  }
  echartsInit()
  echartsetOption(option)
})
</script>

<style lang="scss" scoped>
.cl-chart {
  width: 100%;
  height: 150px;
}
</style>
